<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>我的预约</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <ul>
            <li v-for="item in orderlist">
                <div class="left" @click="toOrder(item.orderid)">
                    <p>{{ new Date(item.orderdate).toISOString().substring(0, 10) }}</p>
                    <p>{{ item.setmeal.name }}</p>
                </div>
                <div class="right" v-if="item.state == 1" @click="toPay(item.orderid)">去支付</div>
                <div class="right" v-if="item.state == 2" @click="cancelOrder(item)">取消预约</div>
                <div class="right" v-if="item.state == 3" @click="cancelOrder(item.orderid)">已归档</div>
                <div class="right" v-if="item.state == 4">已取消预约</div>
            </li>
            <li
                v-if="orderlist.length == 0"
                style="align-items: center; align-content: center; justify-content: center; height: 100px"
            >
                <p>暂无预约记录</p>
            </li>
        </ul>
        <div ref="alipayForm"></div>
        <div class="bottom-ban"></div>
        <tijianfooter></tijianfooter>
    </div>
</template>

<script setup>
import "../style/css/appointmentlist.css";
import tijianfooter from "../components/tijianfooter.vue";
import {ref, onMounted} from "vue";
import {useRouter, useRoute} from "vue-router";
import {getSessionStorage} from "@/utils/common";
import axios from "axios";

const router = useRouter();
const route = useRoute();
const user = getSessionStorage("user");
const orderlist = ref([]);
const alipayForm = ref();
const fetchOrderList = async () => {
    axios
    .post("api/order/orderlist", {
        userid: user.userid,
    })
    .then((res) => {
        console.log(res);
        orderlist.value = res.data.data;
    });
};
onMounted(fetchOrderList);

const toPay = async (id) => {
    await axios
    .get("/api/pay/alipay", {params: {orderid: id}})
    .then((response) => {
        console.log(response);
        // 将form表单字符串添加到<div>中
        alipayForm.value.innerHTML = response.data;

        window.document.forms[0].submit();
    })
    .catch((error) => {
        console.log(error);
    });
};
const toOrder = (orderid) => {
    router.push({
        path: "/report",
        query: {
            orderid: orderid,
        },
    });
};
const cancelOrder = (item) => {
    //TODO: 取消预约
    axios
    .put("api/order/editOrder", {
        orderid: item.orderid,
        state: 5,
    })
    .then((res) => {
        console.log(res);
        alert("取消预约")
        if (res.data.status == 200) {
            fetchOrderList();
        }
    });
};
</script>

